<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
	<meta name="google" content="notranslate">
	<title>文章详情</title>
	<link rel='stylesheet' id='global-css'  href='/css/style.css?ver=4.4.2' type='text/css' media='all' />
	<script type='text/javascript' src='/script/libs.min.js?ver=4.4.2'></script>
	<script type='text/javascript' src='/script/functions.js?ver=4.4.2'></script>
	<script type='text/javascript' src='/script/common.js'></script>
    <script type="text/javascript">
		var articleId = getParameter("id");
		var baseUrl = 'http://127.0.0.1/article/';
		$(document).ready(function () {
			// 初始化页面
			ajax.get(baseUrl + articleId, null, viewPage);

			// 新增评论功能绑定
			$(document).on("click", "#btn_comment", function(){
				addComment();
			});
		});

	 	// 回掉函数：页面展示
		function viewPage(data){
			if(data.resCode == 1){
				vm = new Vue({
					el: '#article-vue',
					data: {
						article:data.data.article,
						list:data.data.commentList
					}
				})
			} else {
				alert(data.resMessage);
			}

		}

		/**
		 * 取得URL传参
		 * @param param
		 * @returns {*}
		 */
		function getParameter(param)
		{
			var query = window.location.search;
			var iLen = param.length;
			var iStart = query.indexOf(param);
			if (iStart == -1)
				return "";
			iStart += iLen + 1;
			var iEnd = query.indexOf("&", iStart);
			if (iEnd == -1)
				return query.substring(iStart);
			return query.substring(iStart, iEnd);
		}

		/**
		 * 新增文章评论
		 */
		function addComment(){
			var url = baseUrl + "addComment";
			var commentInfo = $("#commentInfo").val();
			var param = {
				"articleId": articleId
				,"commentInfo": commentInfo
			}
			ajax.post(url, param, viewComment)
		}

		/**
		 * 评论重新展示
		 */
		function viewComment(data){
			if(data.resCode == 1){
                location.reload();
			} else {
				alert(data.resMessage)
			}

		}

		/**
         * 弹出评论层
         */
		function showModel(commentId){
            $("#commentId").val(commentId);
            $(".login-content").show();
        }

        /**
         * 关闭弹出层
         */
        function closeModel(){
            $(".login-content").hide();
        }

		/**
		 * 新增回复评论
		 */
		function addReply(){
			var url = baseUrl + "addComment";
			var commentInfo = $("#commentReply").val();
			var commentId = $("#commentId").val();
			var param = {
				"articleId": articleId
				,"commentInfo": commentInfo
                ,"commentId" : commentId
			}
			ajax.post(url, param, viewComment)
		}
    </script>
</head>
<body>
	<div id="wrap" class="wrap">
		<header id="header" class="header">
			<h1 class="logo">
				<a href="index.html"  id="admin-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="jk-Blog">
					<label>jk-Blog</label>
					<span class="css-arrow-bottom"></span>
				</a>
			</h1>
			<div class="right-side">
				<div class="news">
					<a href="">
						<label>3</label>
						<img class="js-svg" src="images/svg/info.svg">
					</a>
				</div>
				<div class="dropdown settings">
					<a class="button" id="settings" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="jk-Blog">
						<label class="avatar"><img src="images/logo-x.png" alt="da bai"></label>
						<span class="css-arrow-bottom"></span>
					</a>
					<ul class="dropdown-menu" aria-labelledby="settings">
						<li><a href="user-info.html">账号信息</a></li>
						<li><a href="notification-settings.html">通知设置</a></li>
						<li role="separator" class="divider"></li>
						<li><a class="small" href="login.html">退出</a></li>
					</ul>
				</div>
			</div>
		</header>

		<div class="container">
			<div class="ajax-container">

				<section class="content">
					<div class="ui-list ui-project-list" id="article-vue">
						<h1 class="section-heading">{{article.articleTitle}}</h1>

						<div class="filter form-inline clearfix">
							<div class="form-group" style="margin-left: 50px;width: 80%;">
								<label>{{article.articleInfo}}</label>
							</div>
						</div>
						<fieldset class="form page-1">
							<div class="list">
								<table class="table table-hover">
									<tbody>
									<tr v-for="record in list">
										<th scope="row">{{$index+1}}楼</th>
										<td>
                                            {{record.commentInfo}}
                                            <div v-for="reply in record.commentList" style="padding-left: 50px;">
                                                回复{{$index+1}}&nbsp;&nbsp;{{reply.commentInfo}}
                                            </div>
                                        </td>
										<td>{{record.createTime}}</td>
										<td class="operating" commentId="{{record.id}}">
											<span class="js-view">
												<a href="javascript:showModel('{{record.id}}');">
													回复
												</a>
											</span>
										</td>
									</tr>

									</tbody>
								</table>
							</div>
							<div class="btn-col">
								&nbsp;
							</div>
							<div class="form-group" style="padding-left: 50px;">
								<textarea style="width: 80%; height: 50px;" id="commentInfo"></textarea>
								&nbsp;&nbsp;
								<button id="btn_comment" class="btn btn-info" style="min-width: 80px;margin-bottom: 50px;">新增评论</button>
							</div>
						</fieldset>


					</div>
				</section>
			</div>
		</div>

        <section class="login-content" style="display: none; margin-top: -30%;">
            <input type="hidden" id="commentId">
            <fieldset class="form">
                <div class="form-group">
                    <div class="input-group">
                        <textarea id="commentReply" style="width: 280px;height: 150px;"></textarea>
                    </div>
                </div>
                <button id="btn_addReply" onclick="addReply();" class="btn btn-block btn-lg btn-info" style="width: 80px;">添加回复</button>
                <button id="btn_close" onclick="closeModel();" class="btn btn-block btn-lg btn-info" style="width: 80px;">关闭</button>
            </fieldset>
        </section>
	</div>
</body>
</html>